<template>
  <el-card class="box-card" style="width: 800px; margin: 0 auto">
    <h3>等级设置</h3>
    <el-button
      type="primary"
      icon="el-icon-plus"
      @click="addDate"
      style="margin: 0 0 30px"
      v-if="!state"
      >新增等级</el-button
    >
    <el-form
      :model="form"
      ref="myform"
      :rules="rules"
      :inline="true"
      class="demo-form-inline"
      label-width="120px"
    >
      <div v-for="(item, index) in form.list" :key="index">
        <p>会员卡等级</p>

        <el-form-item
          label="等级名称"
          :rules="rules.levelName"
          :prop="'list.' + index + '.levelName'"
        >
          <el-input placeholder="等级名称" v-model="item.levelName"></el-input>
        </el-form-item>
        <el-form-item
          label="首充金额"
          :rules="rules.firstRecharge"
          :prop="'list.' + index + '.firstRecharge'"
        >
          <el-input
            placeholder="首充金额"
            v-model="item.firstRecharge"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="累计充值"
          :rules="rules.rechargeAmount"
          :prop="'list.' + index + '.rechargeAmount'"
        >
          <el-input
            placeholder="累计充值"
            v-model="item.rechargeAmount"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="会员卡等级"
          :rules="rules.levelId"
          :prop="'list.' + index + '.levelId'"
        >
          <el-input placeholder="会员卡等级" v-model="item.levelId"></el-input>
        </el-form-item>
        <p style="margin-bottom: 20px; color: #ccc">
          折扣设置 输入数值为折扣值，7折为0.7 ，不打折为“1” 免费为“0”
        </p>
        <el-form-item
          label="订场折扣"
          :rules="rules.bookingDiscount"
          :prop="'list.' + index + '.bookingDiscount'"
        >
          <el-input
            placeholder="订场折扣"
            v-model="item.bookingDiscount"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品折扣"
          :rules="rules.commodityDiscount"
          :prop="'list.' + index + '.commodityDiscount'"
        >
          <el-input
            placeholder="商品折扣"
            v-model="item.commodityDiscount"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="门票折扣"
          :rules="rules.ticketDiscount"
          :prop="'list.' + index + '.ticketDiscount'"
        >
          <el-input
            placeholder="门票折扣"
            v-model="item.ticketDiscount"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="课程折扣"
          :rules="rules.courseDiscount"
          :prop="'list.' + index + '.courseDiscount'"
        >
          <el-input
            placeholder="课程折扣"
            v-model="item.courseDiscount"
          ></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div style="display: flex; justify-content: center">
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </el-card>
</template>
<script>
import { cardLevelSave, cardLevelUpdate, cardLevelShow } from '@/config/api'
import { times, divide } from "@/utils/tools"

export default {
  data () {
    return {
      form: {
        list: [{
          levelId: undefined,
          levelName: undefined,
          firstRecharge: undefined,
          rechargeAmount: undefined,
          bookingDiscount: undefined,
          commodityDiscount: undefined,
          ticketDiscount: undefined,
          courseDiscount: undefined,
        }]
      },
      state: false,
      rules: {
        levelName: [
          { required: true, message: '请输入等级名称', trigger: 'blur' }],
        levelId: [
          { required: true, message: '请输入会员卡等级', trigger: 'blur' }],
        firstRecharge: [
          { required: true, message: '请输入首充金额', trigger: 'blur' }],
        rechargeAmount: [
          { required: true, message: '请输入累计充值', trigger: 'blur' }],
        bookingDiscount: [
          { required: true, message: '请输入订场折扣', trigger: 'blur' }],
        commodityDiscount: [
          { required: true, message: '请输入商品折扣', trigger: 'blur' }],
        ticketDiscount: [
          { required: true, message: '请输入门票折扣', trigger: 'blur' }],
        courseDiscount: [
          { required: true, message: '请输入课程折扣', trigger: 'blur' }],

      },
      id: ""
    }
  },
  created () {
    let id = this.$route.query.id
    this.id = id
    if (id) {
      this.state = true
      cardLevelShow({ id: id }).then(res => {
        this.form.list = [{
          id: res.data.result.id,
          levelId: res.data.result.levelId,
          levelName: res.data.result.levelName,
          firstRecharge: divide(res.data.result.firstRecharge, 100),
          rechargeAmount: divide(res.data.result.rechargeAmount, 100),
          bookingDiscount: divide(res.data.result.bookingDiscount, 100),
          commodityDiscount: divide(res.data.result.commodityDiscount, 100),
          ticketDiscount: divide(res.data.result.ticketDiscount, 100),
          courseDiscount: divide(res.data.result.courseDiscount, 100),
        }]
      })
    }
  },
  methods: {
    addDate () {
      this.form.list.push({
        levelId: undefined,
        levelName: undefined,
        firstRecharge: undefined,
        rechargeAmount: undefined,
        bookingDiscount: undefined,
        commodityDiscount: undefined,
        ticketDiscount: undefined,
        courseDiscount: undefined,
      })
    },
    submit () {
      this.$refs['myform'].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form.list))
          params.map(item => {
            item.firstRecharge = times(item.firstRecharge, 100)
            item.rechargeAmount = times(item.rechargeAmount, 100)
            item.bookingDiscount = times(item.bookingDiscount, 100)
            item.commodityDiscount = times(item.commodityDiscount, 100)
            item.ticketDiscount = times(item.ticketDiscount, 100)
            item.courseDiscount = times(item.courseDiscount, 100)
          })
          if (this.id) {
            cardLevelUpdate(params[0]).then(res => {
              if (res.data.status == 200) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
                this.$router.go(-1)
              }
            })
          } else {
            cardLevelSave(params).then((res) => {
              if (res.data.status == 200) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
                this.$router.go(-1)
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    }
  }
}
</script>
<style scoped>
.wrap {
  margin: 30px;
}
</style>